<template>
	<section class="aui-flexView">
		<section class="aui-scrollView">
			<div class="aui-main-head">
				<img src="../assets/user/head.png" alt="">
				<div class="aui-main-user">
					<div class="aui-user-img">
						<img style="width: 75px;height: 75px;" :src="require('../config').serverUrl + $route.query.data.data.icon" alt="">
					</div>
					<h2>{{$route.query.data.data.nikename}}</h2>
				</div>
				<div class="aui-palace aui-palace-one">
					<a href="javascript:;" class="aui-palace-grid">
						<div class="aui-palace-grid-text">
							<h2>{{$route.query.data.data.subscribe}}</h2>
						</div>
						<div class="aui-palace-grid-text">
							<p>订阅</p>
						</div>
					</a>
					<a href="javascript:;" class="aui-palace-grid">
						<div class="aui-palace-grid-text">
							<h2>{{$route.query.data.data.follow}}</h2>
						</div>
						<div class="aui-palace-grid-text">
							<p>关注</p>
						</div>
					</a>
					<a href="javascript:;" class="aui-palace-grid">
						<div class="aui-palace-grid-text">
							<h2>{{$route.query.data.data.fans}}</h2>
						</div>
						<div class="aui-palace-grid-text">
							<p>粉丝</p>
						</div>
					</a>
				</div>
			</div>
			<div class="aui-mon-list">
				<a href="javascript:;" class="aui-flex b-line">
					<div class="aui-cou-img">
						<img src="../assets/user/icon-fl-001.png" alt="">
					</div>
					<div class="aui-flex-box">
						<p>我的通知</p>
					</div>
					<div class="aui-arrow">
						<span></span>
					</div>
				</a>
				<a href="javascript:;" class="aui-flex b-line">
					<div class="aui-cou-img">
						<img src="../assets/user/icon-fl-002.png" alt="">
					</div>
					<div class="aui-flex-box">
						<p>我的文章</p>
					</div>
					<div class="aui-arrow">
						<span></span>
					</div>
				</a>
				<a href="javascript:;" class="aui-flex">
					<div class="aui-cou-img">
						<img src="../assets/user/icon-fl-004.png" alt="">
					</div>
					<div class="aui-flex-box">
						<p>我的收藏</p>
					</div>
					<div class="aui-arrow">
						<span></span>
					</div>
				</a>
				<!-- 中间的灰方块 -->
				<div class="divHeight"></div>
				<a href="javascript:;" class="aui-flex b-line">
					<div class="aui-cou-img">
						<img src="../assets/user/icon-fl-005.png" alt="">
					</div>
					<div class="aui-flex-box">
						<p>最近阅读</p>
					</div>
					<div class="aui-arrow">
						<span></span>
					</div>
				</a>
				<a href="javascript:;" class="aui-flex b-line">
					<div class="aui-cou-img">
						<img src="../assets/user/icon-fl-007.png" alt="">
					</div>
					<div class="aui-flex-box">
						<p>意见反馈</p>
					</div>
					<div class="aui-arrow">
						<span></span>
					</div>
				</a>
				<div class="divHeight"></div>
				<a href="javascript:;" class="aui-flex b-line">
					<div class="aui-cou-img">
						<img src="../assets/user/icon-fl-009.png" alt="">
					</div>
					<div class="aui-flex-box">
						<p @click="logout">注销用户</p>
					</div>
					<div class="aui-arrow">
						<span></span>
					</div>
				</a>
				<a href="javascript:;" class="aui-flex b-line">
					<div class="aui-cou-img">
						<img src="../assets/user/icon-fl-010.png" alt="">
					</div>
					<div class="aui-flex-box">
						<p>设置</p>
					</div>
					<div class="aui-arrow">
						<span></span>
					</div>
				</a>
			</div>
			<div style="height:55px;"></div>

		</section>

	</section>
</template>

<script>
	import axios from '../plugins/axios.js';
	export default {
		
		beforeRouteEnter(to, from, next) {
			console.log('beforeRouteEnter')
			axios.get('/api/user')
				.then(
					res => {
						console.log(2, res)
						if (res.err == 1) {
							console.log(3)
							to.query.data = res;
							next()
						}
					}
				)
		},
		name: 'user',
		props: {},
		data() {
			return {};
		},
		components: {},
		mounted() {},
		updated() {},
		methods: {
			logout() {
				window.localStorage.removeItem('user');
				this.username = "";
				this.$router.push('/login');
			}
		}
	};
</script>

<style scoped>
	html,
	body {
		color: #333;
		margin: 0;
		height: 100%;
		font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-weight: normal;
	}

	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	a {
		text-decoration: none;
		color: #000;
	}

	a,
	label,
	button,
	input,
	select {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	img {
		border: 0;
	}

	body {
		background: #fff;
		color: #666;
	}

	html,
	body,
	div,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	button,
	fieldset,
	form,
	input,
	legend,
	textarea,
	th,
	td {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
		color: #08acee;
	}

	button {
		outline: 0;
	}

	img {
		border: 0;
	}

	button,
	input,
	optgroup,
	select,
	textarea {
		margin: 0;
		font: inherit;
		color: inherit;
		outline: none;
	}

	li {
		list-style: none;
	}

	a {
		color: #666;
	}

	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	.clearfix {}


	.divHeight {
		width: 100%;
		height: 10px;
		background: #f5f5f5;
		position: relative;
		overflow: hidden;
	}

	.r-line {
		position: relative;
	}

	.r-line:after {
		content: '';
		position: absolute;
		z-index: 0;
		top: 0;
		right: 0;
		height: 100%;
		border-right: 1px solid #D9D9D9;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
		-webkit-transform-origin: 100% 0;
		transform-origin: 100% 0;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}


	/* 必要布局样式css */

	. .m-slider {
		overflow-x: hidden;
		width: 100%;
		position: relative;
	}

	.slider-wrapper {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		height: 100%;
		-webkit-transform: translate3d(0px, 0px, 0px);
		transform: translate3d(0px, 0px, 0px);
		position: relative;
		z-index: 1;
		-webkit-transition-property: -webkit-transform;
		transition-property: -webkit-transform;
		transition-property: transform;
		transition-property: transform, -webkit-transform;
	}

	.slider-item {
		width: 100%;
		height: 100%;
		-webkit-flex-shrink: 0;
		-ms-flex-negative: 0;
		flex-shrink: 0;
		background: #f6f6f6;
	}






	/*  */
	.aui-palace-grid {
		position: relative;
		float: left;
		padding: 1px;
		width: 20%;
		box-sizing: border-box;
		margin: 5px 0;
	}

	.aui-palace-grid-text {
		display: block;
		text-align: center;
		color: #333;
		font-size: 1.125rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		/* padding-top: -0.2rem; */
	}

	.aui-main-head {
		position: relative;
		width: 100%;
		height: 200px;
	}


	.aui-main-head img {
		width: 100%;
		height: 100%;
		display: block;
		border: none;
	}



	.aui-main-user {
		position: absolute;
		left: 50%;
		top: 15%;
		width: 100%;
		margin-left: -50%;
	}

	.aui-user-img {
		width: 70px;
		/* height: 70px; */
		margin: 0 auto;
	}

	.aui-user-img img {
		width: 100%;
		border: 2px solid #fff;
		border-radius: 100%;
	}

	.aui-main-user h2 {
		text-align: center;
		color: #fff;
		font-weight: normal;
		margin-top: 0.8rem;
		font-size: 1.8rem;
	}

	/*  */
	.aui-palace-one {
		position: absolute;
		left: 50%;
		bottom: 5%;
		width: 100%;
		margin-left: -50%;
	}

	.aui-palace-one .aui-palace-grid {
		width: 33.333%;
	}

	.aui-palace-one .aui-palace-grid-text h2 {
		color: rgba(255, 255, 255, 0.8);
		font-size: 1.8rem;
	}

	.aui-palace-one .aui-palace-grid-text p {
		color: rgba(255, 255, 255, 0.8);
		font-size: 1.4rem;
	}


	.aui-cou-img {
		width: 25px;
		height: 25px;
		margin-right: 0.3rem;
	}

	.aui-cou-img img {
		width: 25px;
		height: 25px;
		display: block;
		border: none;
	}

	.aui-arrow {
		text-align: right;
		color: #394154;
		padding-right: 12px;
		position: relative;
		font-size: 0.85rem;
	}

	.aui-arrow span {
		color: #666666;
		font-size: 0.8rem;
	}

	.aui-arrow:after {
		content: " ";
		display: inline-block;
		height: 8px;
		width: 8px;
		border-width: 1px 1px 0 0;
		border-color: #9f9f9f;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: relative;
		top: -2px;
		position: absolute;
		top: 50%;
		margin-top: -5px;
		right: 2px;
		border-radius: 1px;
	}

	.aui-mon-list .b-line:after {
		left: 10%;
		width: 90%;
	}
</style>
